<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      padding:0;
      margin:0;
    }
  </style>
</head>
<body>
  <div class="container">
    <img id="image" src="../img/1.jpg" alt="">
  </div>
  <script >
   // 获取dom
    const container = document.querySelector('.container');
    const image = document.getElementById('image');
    // 全局变量
    let result,
        x,
        y,
        scale = 1,
        isPointerdown = false, // 按下标识
        point = { x: 0, y: 0 }, // 第一个点坐标
        diff = { x: 0, y: 0 }, // 相对于上一次pointermove移动差值
        lastPointermove = { x: 0, y: 0 }; // 用于计算diff
    

      image.addEventListener('load', () =>{
        //获取浏览器宽高获取图片的真实宽高 
        result = getImageSize(image.naturalWidth, image.naturalHeight,window.innerWidth,window.innerHeight)
        image.style.width = result.width
        image.style.height = result.height
        x = (window.innerWidth-result.width)/2
        y = (window.innerHeight-result.height)/2
        image.style.transform = `translate(${x}px,${y}px ) scale(1)`;

        drag()
        wheelZoom()
      })

      const getImageSize = (naturalWidth,naturalHeight,maxWidth,maxHeight) => {
        const imgRatio = naturalWidth / naturalHeight;
        const maxRatio = maxWidth / maxHeight;
        let width, height;
        // 如果图片实际宽高比例 >= 显示宽高比例
        if (imgRatio >= maxRatio) {
            if (naturalWidth > maxWidth) {
                width = maxWidth;
                height = maxWidth / naturalWidth * naturalHeight;
            } else {
                width = naturalWidth;
                height = naturalHeight;
            }
        } else {
            if (naturalHeight > maxHeight) {
                width = maxHeight / naturalHeight * naturalWidth;
                height = maxHeight;
            } else {
                width = naturalWidth;
                height = naturalHeight;
            }
        }
        return { width: width, height: height }
      }

      // 拖拽查看
function drag() {
    // 绑定 pointerdown
    image.addEventListener('pointerdown', function (e) {
        isPointerdown = true;
        image.setPointerCapture(e.pointerId);
        point = { x: e.clientX, y: e.clientY };
        lastPointermove = { x: e.clientX, y: e.clientY };
    });
    // 绑定 pointermove
    image.addEventListener('pointermove', function (e) {
        if (isPointerdown) {
            const current1 = { x: e.clientX, y: e.clientY };
            diff.x = current1.x - lastPointermove.x;
            diff.y = current1.y - lastPointermove.y;
            lastPointermove = { x: current1.x, y: current1.y };
            x += diff.x;
            y += diff.y;
            image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
            // log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
        }
        e.preventDefault();
    });
    // 绑定 pointerup
    image.addEventListener('pointerup', function (e) {
        if (isPointerdown) {
            isPointerdown = false;
        }
    });
    // 绑定 pointercancel
    image.addEventListener('pointercancel', function (e) {
        if (isPointerdown) {
            isPointerdown = false;
        }
    });
}
// 滚轮缩放
function wheelZoom() {
    container.addEventListener('wheel', function (e) {
        let ratio = 1.1;
        // 缩小
        if (e.deltaY > 0) {
            ratio = 0.9;
        }
        // 目标元素是img说明鼠标在img上，以鼠标位置为缩放中心，否则默认以图片中心点为缩放中心
        if (e.target.tagName === 'IMG') {
            const origin = { 
                x: (ratio - 1) * result.width * 0.5,
                y: (ratio - 1) * result.height * 0.5
            };
            // 计算偏移量
            x -= (ratio - 1) * (e.clientX - x) - origin.x;
            y -= (ratio - 1) * (e.clientY - y) - origin.y;
        }
        scale *= ratio;
        image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
        // log.innerHTML = `x = ${x.toFixed(0)}<br>y = ${y.toFixed(0)}<br>scale = ${scale.toFixed(5)}`;
        e.preventDefault();
    });
}


  </script>
</body>
</html>